<p>
En este nuevo capítulo vamos a ver los efectos que trae incluidos la librería de jQuery. Vamos a ver como podemos ocultar y mostrar diferentes elementos echando mano de las propias transiciones que esta librería nos proporciona como, por ejemplo "show", "hide", "fadeIn" o "fadeOut".  
</p>

<p>Todos estos métodos nos van a permitir ocultar o mostrar elementos con distintas transicciones. La más simple de todas las opciones quizás pudiera ser la de ocultar o mostrar un div en función de las necesidades que tuviéramos, para esto tenemos por ejemplo los métodos "show" y "hide". En este caso estos dos métodos simplemente muestran u ocultan sin ninguna transición intermedia. Veamos un código de ejemplo y una muestar:</p>
<pre>
//Código Javascript:
$('#btShow').click(function(){
	var elem = $('.jqCap16Sub1');
	elem.show();
});

$('#btHide').click(function(){
	var elem = $('.jqCap16Sub1');
	elem.hide();
});

//Código Html
<button class="change" id="btShow">Show</button>
<button class="change" id="btHide">Hide</button>
<div class="ejemplos jqCap16Sub1"></div>
</pre>
<button class="change" id="btShow">Show</button>
<button class="change" id="btHide">Hide</button>
<div class="ejemplos jqCap16Sub1"></div>

<p>Cómo podemos observar en el ejemplo lo que se realiza si realizamos una inspección de elementos es que el div pasa de "display:block;" a "display:none;". Este efecto así me parece un poco cutre, pero mejora si por ejemplo en vez de utilizar "show/hide" utilizamos "slideUp/slideDown" puesto que el elemento sube y baja para mostrarse/ocultarse y para mí gusto le da una mejor remate a la transición. </p>
<pre>
//Código Javascript:
$('#btSlideUp').click(function(){
	var elem = $('.jqCap16Sub2');
	elem.slideUp();
});

$('#btSlideDown').click(function(){
	var elem = $('.jqCap16Sub2');
	elem.slideDown();
});

//Código Html
<button class="change" id="btSlideUp">Slide Up</button>
<button class="change" id="btSlideDown">Slide Down</button>
<div class="ejemplos jqCap16Sub2"></div>
</pre>
<button class="change" id="btSlideUp">Slide Up</button>
<button class="change" id="btSlideDown">Slide Down</button>
<div class="ejemplos jqCap16Sub2"></div>
<p>Otra de los efectos más practicos puede resultar el conjunto "fadeIn/fadeOut" que hace que nuestro div se vuelva progresivamente más transparente/opaco hasta desaparecer/aparecer:</p>
<pre>
//Codigo JavaScript:
$('#btFadeIn').click(function(){
	var elem = $('.jqCap16Sub3');
	elem.fadeIn();
});

$('#btFadeOut').click(function(){
	var elem = $('.jqCap16Sub3');
	elem.fadeOut();
});
//Código Html
<button class="change" id="btFadeIn">Fade In</button>
<button class="change" id="btFadeOut">Fade Out</button>
<div class="ejemplos jqCap16Sub3"></div>
</pre>
<button class="change" id="btFadeIn">Fade In</button>
<button class="change" id="btFadeOut">Fade Out</button>
<div class="ejemplos jqCap16Sub3"></div>

<p>Por último y para finalizar vamos a ver dos cositas rápidas, una es el tema de que si hay algún método de jQuery que coge el prefijo de otro y tiene como denominación final "Toggle" esto significará que va a funcionar en los dos casos, cuando se quiera hacer la operación y cuando se quiera deshacer la misma, él método en función del estado actual del elemento decide que es lo más conveniente y lo realiza, para dejarlo bien claro realizamos un ejemplo con "slideToogle". El segundo apunte es en relación a que sucede si quisiéramos cambiar el tiempo en que tardan en hacerse las transiciones, pues es tan sencillo como pasarle al método el tiempo en milisegundos que queremos que dure la misma tal y como se muestra en el slideToggle retardado.</p>
<pre>
//Codigo JavaScript:
$('#btSlideToggle').click(function(){
	var elem = $('.jqCap16Sub4');
	elem.slideToggle();
});

$('#btSlideToggleRet').click(function(){
	var elem = $('.jqCap16Sub4');
	elem.slideToggle(4000);
});

//Código Html
<button class="change" id="btSlideToggle">Slide Toggle</button>
<button class="change" id="btSlideToggleRet">Slide Toggle Retardado</button>
<div class="ejemplos jqCap16Sub4"></div>
</pre>

<button class="change" id="btSlideToggle">Slide Toggle</button>
<button class="change" id="btSlideToggleRet">Slide Toggle Retardado</button>
<div class="ejemplos jqCap16Sub4"></div>

<!--<script type="text/javascript" src="http://www.rfsouto.com/Scripts/capitulo16.js"></script>-->
<script type="text/javascript">
<!--
jqefectos();
//-->
</script>